<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 
            侦听器
                应用场景: 数据的变化时执行异步或开销较大的操作
        -->
        <div>
            <span>名:</span>
            <span>
                <input type="text" v-model="firstName">
            </span>
            <span>姓:</span>
            <span>
                <input type="text" v-model="lastName">
            </span>
            <div>{{fullName}}</div>
        </div>
    </div>

    <script lang="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                firstName:'Jim',
                lastName:'Green',
                // fullName:'Jim Green'
            },
            computed:{
                fullName:function(){
                    return this.firstName + ' ' + this.lastName
                }
            },
            watch:{
                // firstName:function(val){
                //     this.fullName = val+' '+ this.lastName
                // },
                // lastName:function(val){
                //     this.fullName = this.firstName +' '+ val
                // }
            }

        })
    </script>

</body>

</html>